<template>
  <div>
    <van-nav-bar
      title="中信红树湾北区"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in arr.houseImg" :key="index">
        <van-image width="100%" height="252px" :src="url + item" />
      </van-swipe-item>
    </van-swipe>
    <div class="house-center">
      <div class="center-head">
        <h3>{{ arr.title }}</h3>
        <p>{{ tags }}</p>
      </div>
      <div class="center-main">
        <div>
          <p>{{ arr.price }}<span>/月</span></p>
          <i>租金</i>
        </div>
        <div>
          <p>{{ arr.roomType }}</p>
          <i>房型</i>
        </div>
        <div>
          <p>{{ arr.size }}平米</p>
          <i>面积</i>
        </div>
      </div>
      <div class="center-footer">
        <div>
          <p>装修： <span>精装</span></p>
          <p>
            楼层： <span>{{ arr.floor }}</span>
          </p>
        </div>
        <div>
          <p>
            朝向： <span>{{ oriented }}</span>
          </p>
          <p>类型： <span>普通住宅</span></p>
        </div>
      </div>
    </div>
    <div class="huise"></div>
    <div class="map">
      <h3>小区：天山星城</h3>
      <div class="map-img"></div>
      <div class="peitao">
        <p>房屋配套</p>
      </div>
      <div class="map-footer">
        <div v-for="(item, index) in arr.supporting" :key="index">
          <i :class="[activeClass, icons(item)]"></i>
          <p>{{ item }}</p>
        </div>
      </div>
    </div>
    <div class="huise"></div>
    <div class="gaikuang">
      <div class="title">房屋概况</div>
      <div class="gaikuang-mian">
        <div class="mian-title">
          <div class="main-left">
            <img src="http://liufusong.top:8080/img/avatar.png" alt="" />
            <div>
              <p>王女士</p>
              <span><van-icon name="shield-o" />已认证房主</span>
            </div>
          </div>
          <div class="main-right">
            <van-button plain type="primary">发消息</van-button>
          </div>
        </div>
        <p>
          1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
          2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
          3.人车分流，环境优美。
          4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
        </p>
      </div>
    </div>
    <div class="huise"></div>
    <div class="your-like">
      <div class="like-title">猜你喜欢</div>
      <div class="mian-house">
        <div class="mian-item">
          <div class="item-left">
            <img src="http://liufusong.top:8080/img/message/1.png" alt="" />
          </div>
          <div class="item-right">
            <div class="item-right-h3 sin-line">安贞西里 3室1厅</div>
            <div class="item-right-span">72.32㎡/南 北/低楼层</div>
            <p>随时看房</p>
            <h2>4500 <span>元/月</span></h2>
          </div>
        </div>
      </div>
      <div class="mian-house">
        <div class="mian-item">
          <div class="item-left">
            <img src="http://liufusong.top:8080/img/message/2.png" alt="" />
          </div>
          <div class="item-right">
            <div class="item-right-h3 sin-line">天居园 2室1厅</div>
            <div class="item-right-span">83㎡/南/高楼层</div>
            <p>近地铁</p>
            <h2>7200 <span>元/月</span></h2>
          </div>
        </div>
      </div>
      <div class="mian-house">
        <div class="mian-item">
          <div class="item-left">
            <img src="http://liufusong.top:8080/img/message/3.png" alt="" />
          </div>
          <div class="item-right">
            <div class="item-right-h3 sin-line">角门甲4号院 1室1厅</div>
            <div class="item-right-span">52㎡/西南/低楼层</div>
            <p>集中供暖</p>
            <h2>4300 <span>元/月</span></h2>
          </div>
        </div>
      </div>
    </div>
    <div class="tabbar">
      <van-button icon="star-o" type="info" class="shouchang" plain>
        收藏
      </van-button>
      <van-button plain type="primary" class="zhixun">在线质询</van-button>
      <van-button type="primary">电话预约</van-button>
    </div>
  </div>
</template>

<script>
import { houses } from '@/api/look-house'
export default {
  name: 'house-page',
  components: {},
  props: {},
  data() {
    return {
      url: 'http://liufusong.top:8080',
      arr: [],
      tags: '',
      oriented: '',
      activeClass: 'iconfont'
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res = await houses({ id: this.$route.params.id })
    this.arr = res.data.body
    // console.log(res.data)
    this.tags = res.data.body.tags[0]
    this.oriented = res.data.body.oriented[0]
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    icons(str) {
      if (str === '空调') {
        return 'icon-kongdiao'
      } else if (str === '暖气') {
        return 'icon-shuinuanqigongcheng'
      } else if (str === '热水器') {
        return 'icon-haofangtuo400iconfont2reshuiqi'
      } else if (str === '天然气') {
        return 'icon-meiqitianranqi'
      } else if (str === '电视') {
        return 'icon-dianshiji'
      } else if (str === '冰箱') {
        return 'icon-bingxiang'
      } else if (str === '洗衣机') {
        return 'icon-xiyiji'
      } else if (str === '衣柜') {
        return 'icon-yigui'
      } else if (str === '沙发') {
        return 'icon-shafa'
      } else if (str === '宽带') {
        return 'icon-kuandai'
      }
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar .van-icon {
  color: #fff;
}
.house-center {
  padding: 15px;
  .center-head {
    h3 {
      margin: 16px 0;
      font-size: 16px;
      color: #333333;
      font-weight: normal;
    }
    p {
      width: 46px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 5px;
      font-size: 12px;
      color: #39becd;
      background-color: #e1f5f8;
    }
  }
  .center-main {
    display: flex;
    align-content: center;
    text-align: center;
    justify-content: space-between;
    margin: 15px 0;
    padding: 15px 0;
    border-top: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    div {
      flex: 1;
      p {
        font-size: 18px;
        color: #fa5741;
        font-weight: 700;
        span {
          font-size: 12px;
          color: #fa5741;
        }
      }
      i {
        font-size: 14px;
        color: #999999;
      }
    }
  }
  .center-footer {
    display: flex;
    div {
      flex: 1;
      p {
        font-size: 13px;
        color: #999999;
        line-height: 26px;
        span {
          color: #333333;
        }
      }
    }
  }
}
.huise {
  width: 100%;
  height: 10px;
  background-color: #f6f5f6;
}
.map {
  h3 {
    font-size: 14px;
    color: #333333;
    line-height: 44px;
    padding: 0 12px;
  }
  .map-img {
    width: 100%;
    height: 145px;
    // margin-bottom: 150px;
  }
  .peitao {
    // display: flex;
    height: 48px;
    padding: 0 12px;
    margin-bottom: 100px;
    margin-bottom: 10px;
    p {
      border-bottom: 1px solid #cecece;
      line-height: 48px;
      font-size: 15px;
      color: #333333;
    }
  }
  .map-footer {
    // margin-bottom: 200px;
    padding: 0 12px;
    display: flex;
    // justify-content: center;
    div {
      justify-content: center;
      text-align: center;
      padding-top: 15px;
      width: 71px;
      height: 71px;
      i {
        font-size: 24px;
        color: #333333;
      }
      p {
        font-size: 14px;
        color: #333333;
      }
    }
  }
}
.gaikuang {
  margin-bottom: 20px;
  height: 266px;
  padding: 0 10px;
  .title {
    font-size: 15px;
    color: #333333;
    height: 52px;
    line-height: 52px;
    border-bottom: 1px solid #cecece;
    margin-bottom: 10px;
  }
  .gaikuang-mian {
    .mian-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 52px;
      height: 62px;
      margin-bottom: 20px;
      .main-left {
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 52px;
          height: 52px;
          margin-right: 10px;
        }
        div {
          p {
            font-size: 14px;
            color: #333333;
            line-height: 20px;
          }
          span {
            color: #fa5741;
            font-size: 12px;
            .van-icon {
              font-size: 16px;
            }
          }
        }
      }
      .main-right {
        .van-button {
          width: 74px;
          height: 29px;
          font-size: 14px;
          border-radius: 4px;
        }
      }
    }
    p {
      font-size: 14px;
      color: #333333;
      line-height: 26px;
    }
  }
}
.your-like {
  margin-bottom: 50px;
  padding: 0 15px;
  .like-title {
    height: 48px;
    font-size: 15px;
    color: #333333;
    line-height: 48px;
    border-bottom: 1px solid #cecece;
  }
  .mian-house {
    padding: 0 10px;
    padding-top: 18px;
    .mian-item {
      display: flex;
      height: 100px;
      // background-color: pink;
      .item-left {
        width: 106px;
        height: 80px;
        // background-color: red;
        margin-right: 12px !important;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item-right {
        display: flex;
        flex-direction: column;
        .item-right-h3 {
          font-size: 15px !important;
          color: #394043;
          width: 150px;
        }
        .item-right-span {
          font-size: 12px;
          color: #afb2b3;
          margin: 4px 0;
        }
        p {
          font-size: 12px !important;
          color: #39becd;
          text-align: center;
          border-radius: 6px;
          line-height: 20px;
          background-color: #e8f3f4;
          width: 60px;
          height: 20px;
          margin: 4px 0;
          //   overflow: hidden;
        }
        h2 {
          line-height: 16px !important;
          font-size: 16px !important;
          color: #fa5741;
          span {
            font-size: 12px;
            color: #fa5741;
          }
        }
      }
    }
  }
}
.tabbar {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  .van-button {
    flex: 1;
    height: 50px;
    font-size: 17px;
  }
  .shouchang,
  .zhixun {
    color: #999999;
    border: 1px solid #e8e8e9;
  }
  .zhixun {
    border-left: 0;
    border-right: 0;
  }
}
</style>
